// @ts-ignore
import React, {StrictMode} from 'react'
import {createForm, onFieldChange} from '@formily/core'
import {createSchemaField, useFormEffects} from '@formily/react'
import { Form, FormItem, Input, Password, Submit } from '@formily/antd'
import { Tabs, Card } from 'antd'
import * as ICONS from '@ant-design/icons'

const normalForm = createForm({
  validateFirst: true,
  effects() {
    // onFieldChange('*', () => {
    //   console.log('fieldchange')
    // })
  }
})

const phoneForm = createForm({
  validateFirst: true,
})

const Test = () => {
  useFormEffects(() => {
    console.log('useFormEffects=====')
    // 只要执行该钩子，就会进行依赖收集，目前没有去掉
    onFieldChange('*', () => {
      // debugger
      console.log('fieldchange')
    })
  })
  return <div>1</div>
}

const SchemaField = createSchemaField({
  components: {
    FormItem,
    Input,
    Password,
    Test,
  },
  scope: {
    icon(name) {
      return React.createElement(ICONS[name])
    },
    testReaction(field, context) {
      // console.log('field: ', field, context)
    },
  },
})

export default () => {
  return (
    <StrictMode>
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          background: '#eee',
          padding: '40px 0',
        }}
      >
        <Card style={{ width: 400 }}>
          <Tabs style={{ overflow: 'visible', marginTop: -10 }}>
            <Tabs.TabPane key="1" tab="账密登录">
              <Form
                form={normalForm}
                layout="vertical"
                size="large"
                onAutoSubmit={console.log}
              >
                <SchemaField>
                  <SchemaField.String
                    name="username"
                    title="用户名"
                    required
                    x-decorator="FormItem"
                    x-component="Input"
                    x-reactions="{{ testReaction }}"
                    x-validator={{
                      required: true,
                    }}
                    x-component-props={{
                      prefix: "{{icon('UserOutlined')}}",
                    }}
                  />
                  <SchemaField.String
                    name="password"
                    title="密码"
                    required
                    x-decorator="FormItem"
                    x-component="Password"
                    x-component-props={{
                      prefix: "{{icon('LockOutlined')}}",
                    }}
                  />
                  <SchemaField.String
                    name="xxxx"
                    title="密码"
                    required
                    x-decorator="FormItem"
                    x-component="Test"
                    x-component-props={{
                      prefix: "{{icon('LockOutlined')}}",
                    }}
                  />
                </SchemaField>
                <Submit block size="large">
                  登录
                </Submit>
              </Form>
            </Tabs.TabPane>
          </Tabs>
        </Card>
      </div>
    </StrictMode>
  )
}
